<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- 注意：只能包含单个表达式,不能是多行语句 -->
			<p v-bind:id="'list-'+id">aaa</p>
			<p>{{num+1}}</p>
			<p>{{ok?'YES':'NO'}}</p>
			<p>{{msg.split('').reverse().join('')}}</p>
			<p v-if="show">hide or show</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					id: 'name',
					num: 1,
					ok: true,
					msg: 'hello vue',
					show: false
				}
			})

			vm.num = 100;
			vm.ok = false;
			vm.show = true;
		</script>

	</body>
</html>
